<template>
  <div class="Preview">
    <component :is="isElement" v-if="typeof format==='string'" :url="previewUrl" :file-name="fileName" :title="title" />
  </div>
</template>
<script>
export default {
  name: 'Preview',
  components: {
    BaseVoice: () => import('./BaseVoice/index'), // 音频组件
    BaseVideo: () => import('./BaseVideo/index'), // 视频组件
    Imgwheel: () => import('./Imgwheel/index'), // 图片组件
    BasePdf: () => import('./BasePdf/index'), // 显示pdf 的组件
    BaseFile: () => import('./BaseFile/index') // 文件下载
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    previewUrl: String,
    element: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '查看大图'
    },
    fileName: {
      type: String,
      default: '无'
    }
  },
  data() {
    return {
      key: 'value'
    }
  },
  computed: {
    format() {
      // 判断应用那个组件然后调用
      const Arr = [{ type: '.acc', element: 'BaseVoice' }, { type: '.amr', element: 'BaseVoice' }, { type: '.m4a', element: 'BaseVoice' }, { type: '.ogg', element: 'BaseVoice' }, { type: '.mp3', element: 'BaseVoice' }, { type: '.wav', element: '.BaseVoice' }, { type: '.apng', element: 'Imgwheel' },
        { type: '.bmp', element: 'Imgwheel' }, { type: '.png', element: 'Imgwheel' }, { type: '.gif', element: 'Imgwheel' }, { type: '.ico', element: 'Imgwheel' },
        { type: '.cur', element: 'Imgwheel' }, { type: '.jpg', element: 'Imgwheel' }, { type: '.jpeg', element: 'Imgwheel' },
        { type: '.jfif', element: 'Imgwheel' }, { type: '.pjpeg', element: 'Imgwheel' }, { type: '.pjp', element: 'Imgwheel' }, { type: '.mp4', element: 'BaseVideo' },
        { type: '.pdf', element: 'BasePdf' }
      ]
      const flag = Arr.find(item => this.previewUrl.toLowerCase().includes(item.type))
      if (this.previewUrl && !flag) return 'BaseFile'
      const use = this.previewUrl && flag
      use && use.element === 'BasePdf' && this.$emit('PreviewPdf')
      return use !== undefined ? use.element : { type: 'error' }
    },
    isElement() {
      // 判断调用者有没有传调用组件没有就计算
      return this.element && this.element.length > 0 ? this.element : this.format
    }
  }
}
</script>
<style lang="scss" scoped>
.Preview{
  display: flex;
  justify-content: center;
}
</style>
